let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]
let aHtml = ""
apiTypeData.forEach(function (v) {

    aHtml = aHtml + `<a href="#" keyword=${v.keyword}  class="${v.isnew ? `aa` : ``}">${v.name}</a>`
})
let links = document.querySelector(".api-links")
links.innerHTML = aHtml

//   给a添加点击事件
// 先获取到a标签
let btns = document.querySelectorAll(".api-links a")
// 便利a
btns.forEach(function (v) {
    v.addEventListener("click", function () {
        //    this.getAttribute("ketword")
        let input = document.querySelector(".api-input input")
        // console.log(this.getAttribute("keyword"));点击a标签时input里的输入内容变成定义的属性值
        input.placeholder = this.getAttribute("keyword")
        // 点击a标签时strong里面的页面文本改变为点击的a标签的文本
        let strong = document.querySelector(".api-search strong")
        strong.innerHTML = this.innerHTML
    })
})

// 页面主体部分
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]
let listHtml = ""
listDataArr.forEach(function (v) {
    listHtml += ` <li class="api-item fl">
    <span class="${v.isSpecial ? `company-money` : `company-free`}">企业专用</span>
    <a href="href="api_details.html"" class="api-detail">
        <img src="images/${v.img}" alt=""> 
    </a>
    <p>${v.name}</p>
    <sapn class="${v.isSpecial ? `money` : `free`}">${v.price}</span >
        <button class="api-apply">申请数据</button>
</li>
    `
})
let ul = document.querySelector(".api-list")
ul.innerHTML = listHtml
// 给按钮绑定弹出框
// 通过事件冒泡绑定到ul
ul.addEventListener("click", function (e) {
    if (e.target.className === "api-apply") {
        win.style.display = "block"
    }
})
let win = document.querySelector(".win")
win.addEventListener("click", function (e) {
    if (e.target.className === "win") {
        win.style.display = "none"
    }
})
// 点击弹窗 切换登录方式
// ['账号登录','扫码登录']
let loginbtns = document.querySelectorAll(".btns-a a")
// ['账号登录的盒子','扫码登录的盒子']
let logindiv = document.querySelectorAll(".login-div")

loginbtns.forEach(function (v, i) {
    v.addEventListener("click", function () {
        for (let x = 0; x < logindiv.length; x++) {
            // loginbtns[x].className = ""
            logindiv[x].classList.remove("login-active")
        }
        console.log(this)
        console.log(logindiv[i]);
        logindiv[i].classList.add("login-active")
    })
})
// loginbtns[0].addEventListener("click", function () {
//     for (let x = 0; x < logindiv.length; x++) {
//         logindiv[x].classList.remove("login-active")
//     }
//     logindiv[0].classList.add("login-active")
// })

// loginbtns[1].addEventListener("click", function () {
//     for (let x = 0; x < logindiv.length; x++) {
//         logindiv[x].classList.remove("login-active")
//     }
//     logindiv[1].classList.add("login-active")
// })



// 切换效果未实现 这块还没能理解


